<!doctype html>
<html lang="en">
<head>
<title>CPK趋势图</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="CPK趋势图">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="../../script/mes-import.js"></script>
<script type="text/javascript" src="../../script/js/echart/echarts.min.js"></script>
<style>
	.reportTable{
		float: left;
		width: 30%;
		height: 30%;
		margin-left: 5px;
		margin-top: 5px;
	}
	.reportTable .title{
		border: 1px solid black;
		padding-left: 5px;
	}
	.reportTable .itemPanel{
		border: 1px solid black;
		padding-left: 5px;
		height: 100px;
	}
	.reportTable .itemPanel p{
		margin-top: 2px;
	}
</style>
</head>

<body id="efficiencyReport" style="background: white;">
<form class="layui-form layui-form-pane">
	<div style="width: 100%;margin:0 auto;">
		<div style="margin-top: 20px;">
			<div id="visualization" style="width: 90%;height:400px;background: white;margin: auto;float: left"></div>
		</div>
	</div>
</form>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById("visualization"));
	var vm = new Vue({
		el : "#efficiencyReport",
		data : {
			tableData:[]
		}
		,init:function(){
			this.$nextTick(function() {
                this.$options.methods.searchData(this);
			});
		}
		,methods: {
            resizeChart:function(){
                myChart.resize();
            }
            ,renderTable:function(_self,data){
				layui.use(['form','table','laydate'], function() {
                        var table = layui.table;
                        var laydate = layui.laydate;
                        var form = layui.form;
                        _self.$options.methods.drawPie(_self, data);
                    }
				);
			}
			,searchData:function(_self){
				_self = _self.target ? this : _self;
				var loadIndex;
				layui.use('layer', function(){
					var layer = layui.layer;
					loadIndex = layer.load(1);
				});
				_self.$nextTick(function() {
                    var configId = window.parent.vm.configId;
                    var scDate = window.parent.vm.scDate;
                    var isSample = window.parent.vm.isSample;
                    var remark1 = window.parent.vm.remark1;
					var remark2 = window.parent.vm.remark2;
					var remark3 = window.parent.vm.remark3;
					this.$http.post("../../spc/chartView/cpkPredit",{
                        configId:configId,
                        scDate:scDate
                        ,isSample:isSample
                        ,remark1:remark1,remark2:remark2,remark3:remark3
					},{emulateJSON: true}).then(function(res){
						_self.tableData = res.body;
						_self.$options.methods.renderTable(_self,res.body);
						layer.close(loadIndex);
					});
				});
			}
			,renderForm:function(){
				layui.use('form',function(){
					layui.form.render('select');
				});
			}
			,drawPie:function(_self,data){
				var cpkArray = data.cpkArray;
                var xdata = [];
                for(var i in cpkArray){
                    xdata.push(parseInt(i)+1);
                }
                var avgMarkLine = {
                    data: [
                        {name: '2.00',yAxis:2.0,lineStyle:{color:'#0ff'}},
                        {name: '1.67',yAxis:1.67,lineStyle:{color:'#0f0'}},
                        {name: '1.33',yAxis:1.33,lineStyle:{color:'#fb0'}},
                        {name: '1.00',yAxis:1.0,lineStyle:{color:'#00f'}},
                        {name: '0.67',yAxis:0.67,lineStyle:{color:'#f00'}}
                    ],
                    label: {
                        normal: {
                            formatter: '{b}',
                            textStyle: {
                                align: 'top'
                            }
                        }
                    }
                };

                var seriesData = [
                    {
                        name:'CPK趋势图',
                        type:'line',
                        data:cpkArray,
						markLine:avgMarkLine
                    }
                ];
				myChart.clear();
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {},
                    xAxis: [
                        {
                            type: 'category',
							data:xdata,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: 'CPK',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            show: false,
                            type: 'slider',
                            y: '98%',
                            start: 0,
                            end: 100
                        }
                    ],
                    series:seriesData
                };



				myChart.setOption(option);
			}
		}
		,watch: {

		}
	});
</script>
</body>
</html>
